<template>
  <div>
    这是我的练习
    {{ msg }}
    <div>{{ $store.state.message }}</div>
    <button @click="changeFn1">同步修改</button>
    <button @click="changeFn2">异步修改</button>
    <div>{{ $store.state.user.mass }}</div>
    <button @click="changeFn3">同步修改</button>
    <button @click="changeFn4">异步修改</button>
    <div>这是index中的</div>
    <div>mapGetters辅助函数</div>
    <div>{{ uname }}</div>
    <div>{{ $store.getters.pad }}</div>
    <div>这是user模块中的</div>
    <div>{{ $store.getters.uuname }}</div>
    <div>{{ $store.getters.ppad }}</div>
    <div>mapState辅助函数</div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  data() {
    return {
      msg: '99999'
    }
  },
  computed: {
    // 辅助函数
    ...mapState({
      message: store => store.message
    }),
    ...mapGetters(['uname', 'pad'])
  },
  methods: {
    // 辅助函数
    ...mapActions({
      'newChangeAA': 'changeAA'
    }),
    ...mapMutations({
      'newChange': 'change'
    }),
    changeFn1() {
      // this.$store.commit('change')
      // 传参数
      // this.$store.commit('change', Date.now())
      // mapActions辅助函数
      // this.newChangeAA(Date.now())
    },
    changeFn2() {
    // 调用mutations中的方法
    // this.$store.commit('change')
    // 异步修改调用action
      // this.$store.dispatch('changeAA')
      // 传参数
      // this.$store.dispatch('changeAA', Date.now())
      // mapMutations辅助函数
      // this.newChange(Date.now())
    },
    changeFn3() {
      // this.$store.commit('user/change')
    },
    changeFn4() {
    // 调用mutations中的方法
    // this.$store.commit('change')
    // 异步修改调用action
      // this.$store.dispatch('user/changeAA')
    }
  }
}
</script>

<style>

</style>
